import { Fragment } from 'react/jsx-runtime';
import { ManageAPI } from '../common/type';
import { Button } from 'antd';
import { ManageCommonAPI } from '@/pages/type';
import { EyeOutlined, EditOutlined, CloseCircleOutlined } from '@ant-design/icons';
import { tableMoreBtnConfig } from '@/utils/myutilConfig';
import { ColumnsRenderFun } from '@/common/ManageUilt';

/**
 * 操作列显示
 * */
const Operation = (curRes: Record<string, any>, operateFuns: ManageAPI.IOperateAPI, record: Record<string, any>) => {
  let operationArray: any = [];

  /** 一个按钮都没有时展示*/
  const Disable = (
    <Fragment key={record?.id + '--Disable'}>
      <Button style={{ color: '#000' }} className="manageBtntTxtStyle" type={'link'} size={'small'} disabled>
        --
      </Button>
    </Fragment>
  );

  /** 更多按钮配置 */
  const otherBtnConfig: ManageCommonAPI.TableMoreBtnConfigApi[] = [
    {
      icon: <EyeOutlined />,
      btnName: '查看',
      clickFnc: operateFuns,
      clickType: 'onView',
      isVisible: true,
    },
    {
      icon: <EditOutlined />,
      btnName: '编辑',
      clickFnc: operateFuns,
      clickType: 'onEdit',
      isVisible: true,
    },
    {
      icon: <CloseCircleOutlined />,
      btnName: '作废',
      clickFnc: operateFuns,
      clickType: 'onCancel',
      isVisible: true,
    },
  ];
  const ohterBtn = tableMoreBtnConfig(otherBtnConfig, record);
  operationArray = ohterBtn;
  operationArray = operationArray?.filter((itemBtn: any) => itemBtn);
  return operationArray && operationArray?.length > 0 ? operationArray : [Disable];
};

/**
 * 管理页表格配置
 * */
export const ManageTableSwitch = (curRes: Record<string, any>, operateFuns: ManageAPI.IOperateAPI) => {
  return [
    {
      title: '名称',
      dataIndex: 'fullName',
      key: 'fullName',
      fixed: 'left',
      width: 150,
      unDrag: true,
      visible: true,
      sorter: (a: any, b: any) => (a?.fullName > b?.fullName ? 1 : -1),
      render: (text: string | null, record: Record<string, any>) => ColumnsRenderFun({ text }),
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      width: 230,
      visible: true,
      unDrag: true,
      fixed: 'right',
      render: (text: string | null, record: Record<string, any>) => {
        return <div style={{ display: 'flex' }}>{Operation(curRes, operateFuns, record)}</div>;
      },
    },
  ];
};
